<template>
    <div >
        <head_><h1>反馈中心</h1></head_>
        <div>
            <van-cell-group inset>
                <van-field
                        v-model="message"
                        rows="5"
                        autosize

                        type="textarea"
                        maxlength="50"
                        placeholder="请输入留言"
                        show-word-limit
                ></van-field>
            </van-cell-group>
        </div>
        <div>
        <van-uploader v-model="fileList" accept=".jpg" :after-read="afterRead"/>
        </div>
        <div>
            <van-button round size="small"  type="warning" @click="ok">提交</van-button>
        </div>
    </div>

</template>

<script>
    import head_ from "./header";
    import Vue from 'vue';
    import { Uploader } from 'vant';
    Vue.use(Uploader);
    export default {
        name: "fankui",
        components: {
            head_,
        },
        data(){
            return{
                img:'',
                message:'',
                fileList: []
            }
        },
        methods: {

            formatter(value) {
                // 过滤输入的数字
                console.log(value);
                // return value.replace(/\d/g, '');
            },
            afterRead(file) {

                // 此时可以自行将文件上传至服务器
                // console.log(file);
                const data = new FormData();
                data.append("file", file.file); //上传的是 File 对象
                //使用axios上传文件到服务器,注意设置axios的headers为{ "Content-Type": "multipart/form-data" }
                //因为Uploader组件result-type默认为dataUrl：结果包含 File 对象，以及文件对应的 base64 编码。所以FormData接收的参数应该是file.file,
                this.$http.post("/common/upload/sure",data).then(resp=>{
                    this.img = resp.data.data;
                    this.fileList[0].url = resp.data.data;

                })
            },
            ok(){
                let info = {}
                info.img=this.img
                info.message=this.message

                console.log(info)
                this.$http.post("/feedback/api/mes/a",info).then(resp=>{
                    console.log(resp.data)
                    if (resp.data.code === 200) {
                        this.$toast.success("反馈成功");
                        this.message=''
                        this.fileList=[]
                    }
                })

            }
        }
    }
</script>

<style scoped>

</style>
